<template>
  <div class="box">
    <div class="box-title">
      <img src="@/assets/img/login/icon-title.png" alt="">
      <span>大佛寺智能化综合管控平台</span>
    </div>
    <div class="tips">系统数据加载中...</div>
    <!-- <div class="progress-bar">
      <div class="imgBox" style="overflow: hidden">
        <img
          class="progress"
          :style="{ left: `${imgSum}%` }"
          src="@/assets/img/login/progress.png"
        />
      </div>
      <div class="text">
        <span>{{ text[0] }}</span>
        <span>{{ ratio + "%" }}</span>
      </div>
    </div> -->
    <!-- <div class="tip">
      <div class="title">更新内容</div>
      <div
        v-for="(item, index) in desc"
        :key="index"
        class="tip-item"
        @click="newCont()"
      >
        {{ item }}
      </div>
    </div> -->
    <Version ref="child" />
  </div>
</template>
<script>
import Version from './Version.vue';
export default {
  components: {
    Version
  },
  data() {
    return {
      ratio: 0,
      sum: -55,
      imgSum: 0,
      desc: [
        '1. 智能综采图标替换, 图标颜色更改',
        '2. 更改场景中告警图表样式',
        '3. 更改加载进度条样式'
      ],
      text: ['系统数据加载中...'],
      Alltext: [
        '系统数据加载中...',
        '场景加载中...',
        '两侧面板加载中...',
        '点位资源加载中...'
      ]
    };
  },

  // watch: {
  //   ratio(val) {
  //     const isDevelopment = process.env.NODE_ENV === 'development';
  //     if (val >= 99 && isDevelopment) {
  //       setTimeout(() => {
  //         this.$router.push('/default');
  //       }, 1000);
  //     }
  //   }
  // },
  mounted() {
    // this.getProgress();
    // this.numDwon();
    setTimeout(() => {
      this.$router.push('/default');
    }, 1000);
  },
  methods: {
    // 查看更新内容
    // newCont() {
    //   // this.$router.push('/default');
    //   this.$refs.child.block();
    // },
    // 更新百分比和模块
    // numDwon() {
    //   const that = this;
    //   var ratioSum = 0;
    //   var textSum = 0;
    //   // 百分比到99
    //   const sum = setInterval(function() {
    //     if (that.ratio < 99) {
    //       ratioSum += 1;
    //       that.ratio = ratioSum;
    //     } else {
    //       clearInterval(sum);
    //     }
    //   }, 25);

    // 更新模块
    //   const TextModule = setInterval(function() {
    //     if (textSum <= that.Alltext.length) {
    //       that.text[0] = that.Alltext[textSum];
    //       textSum += 1;
    //     } else {
    //       clearInterval(TextModule);
    //     }
    //   }, 500);
    // },
    // getProgress() {
    // 进度条
    //   if (this.sum < 55) {
    //     this.sum += 1;
    //     if (this.sum === -54) {
    //       this.imgSum = this.sum;
    //     }
    //     if (this.sum === 0) {
    //       this.imgSum = this.sum;
    //     }
    //     if (this.sum === 20) {
    //       this.imgSum = this.sum;
    //     }
    //     if (this.sum === 40) {
    //       this.imgSum = this.sum;
    //     }
    //   }
    //   setTimeout(this.getProgress);
    // }
  }
};
</script>
<style lang="scss" scoped>
.box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  box-sizing: border-box;
  padding-top: 37.5rem;
  width: 100%;
  height: 100vh;
  background-image: url("../assets/img/login/login-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  .box-title{
    text-align: center;
    height: 3.75rem;
    margin-bottom: 3.625rem;
    img{
      width: 3.75rem;
      height: 3.75rem;
      margin-right: .9375rem;
      vertical-align: bottom;
    }
    span{
      font-size: 3.5rem;
      color: #D0DBDC;
    }
  }
  .tips{
    text-align: center;
    color: #34C8FF;
    font-size: 1rem;
  }
  .load {
    margin: 0 auto;
    width: 25.1875rem;
    height: 10.4375rem;
    background-image: url("../assets/img/login/load.gif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .progress-bar {
    margin: 0 auto;
    width: 34.875rem;
    margin-top: 5.625rem;
    width: 46.5rem;
    .imgBox {
      width: 46.75rem;
      position: relative;
      height: 4.6875rem;
    }
    .progress {
      height: 4.6875rem;
      object-fit: contain;
      position: absolute;
      left: -55%;
      transition: 2s ease-in;
    }
    .text {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #34c8ff;

      :first-child {
        height: 1.1875rem;
        line-height: 1.1875rem;
        vertical-align: middle;
        font-size: 1rem;
      }

      :last-child {
        height: 1.75rem;
        line-height: 1.75rem;
        vertical-align: middle;
        font-size: 1.75rem;
      }
    }
  }

  .tip {
    margin: 0 auto;
    margin-top: 5rem;
    width: 46.5rem;
    text-align: left;

    font-size: 0.75rem;
    color: $darkGrey;
    .tip-item {
      cursor: pointer;
    }
    .title {
      margin-bottom: 0.9375rem;
      height: 0.875rem;
      line-height: 0.875rem;
      font-size: 0.875rem;
      color: $white;
      vertical-align: middle;
    }

    &-item {
      margin-bottom: 0.75rem;
      height: 0.75rem;
      line-height: 0.75rem;
      vertical-align: middle;
    }
  }
}
</style>
